import React from 'react';
import { Icon } from 'antd';
import styles from './index.less';

function MyToggleBtn({
    type,
    onPress,
    size = 32,
    bgc = 'transparent',
}) {
    const wrapStyle = {
        width: `${size}px`,
        height: `${size}px`,
        margin: '0 auto',
        backgroundColor: bgc,
        borderRadius: 0
    };
    const test = (e) => {
        e.preventDefault();
        onPress();
    };
    return (
        <div
            className={styles.toggleBtn}
            style={wrapStyle}
            onClick={test}
        >
            <Icon
                type={type ? 'menu-unfold' : 'menu-fold'}
                style={{
                    fontSize: '20px',
                    margin: '6px auto',
                    display: 'block',
                    color: '#fff'
                }}
            />
        </div>
    );
}

export default MyToggleBtn;
